<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <form action="" method="post" enctype="application/x-www-form-urlencoded"></form> -->
    <h1>使用原生的js模拟jq的get和post请求</h1>
    <button class="btn1">点击我发送get形式的ajax</button>
    <button class="btn2">点击我发送post形式的ajax</button>
    <script>
        /* 
            发送post请求 ，在原生ajax里 找到 post和 get的区别 
            1.method   2.参数传递 ：get 是地址栏 传参 。post 通过send发送请求体传参
            3.post 需要设置 请求头部
        
        */

        class Jq{
            ajax(options){
                let {url="",method='get',data={},dataType='json',success=function(){}} = options ; // 获取options里的配置,设置默认参数
               let str =  this.#o2s(data);
               if(method==="get"){
                // 是发送get的时候需要 拼接到地址栏上。
                    url = url + "?" + str;
               }
                let xhr = new XMLHttpRequest();
                xhr.open(method,url);

               if(method=="get"){
                    xhr.send();
               }else{
                // 设置post的请求头部信息
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                // 发送post参数
                 xhr.send(str)
               }
                xhr.onload = function(){
                    if(xhr.status>=200 && xhr.status<300){
                        if(dataType=="text"){
                             success(xhr.responseText); // 调用success函数
                        }else{
                            success(JSON.parse( xhr.responseText));
                        }
                    }
                }

            }
            post(url,data,cb,type="json"){  // 别名
                this.ajax({
                    url,
                    method:"post",
                    data,
                    dataType:type,
                    success:cb
                })
            }
            #o2s(obj){
                let keys = Object.keys(obj); // keys = ['myname','age'];
                let values = Object.values(obj); // values = ['zhangsan',20];
                let arr =  keys.map((key,k)=>{
                    return `${key}=${values[k]}`;
                })
                return arr.join("&");
            }
        }

        let $ = new Jq();


        // 点击btn1发送ajax ；get形式的ajax
        let btn1 = document.querySelector(".btn1");
        btn1.onclick = function(){
            $.ajax({
                url:"/getdata",
                method:"get",
                data:{
                    myname:"zhangsan",
                    age:20,
                    height:"178cm"
                },
                dataType:"text",
                success:function(res){ // 定义success函数
                    console.log(res);
                }
            })
        }


        // 1.promise封装  2.区分post请求

        // 点击按钮发送post形式的ajax
        document.querySelector(".btn2").onclick = function(){
            // $.ajax({  // 发送post 形式的ajax请求
            //     method:"post",
            //     url:"/postdata",
            //     data:{
            //         info:"post传递过来的参数"
            //     },
            //     success(res){
            //         console.log(res);
            //     }
            // })
            $.post("/postdata",{info:"post传递过来的参数"},function(res){
                console.log(res);
            })

        }
    </script>
</body>
</html>